<template>
  <div id="TreatmentPlan">
    <van-nav-bar title="食物成份" left-text="确认返回" left-arrow @click-left="onClickLeft" fixed placeholder/>
    <div class="header">
      <div v-for="(item,index) in Optionslist" :id="item.id" :key="item.id" class="check" ref="check">
        <img :src="apiConfig.imgUrl + item.img" alt="" @click="check($event,item.id)"><span @click="check($event,item.id)" :data-index="index">{{item.title}}</span>
      </div>
    </div>
    <div class="main">
      <div v-if=" list.length !== undefined && list.length >0">
        <div v-for="val in list" :key="val.id">
          <van-row type="flex" justify="space-between" align="center">
            <van-col span="2">
              <van-checkbox v-model="val.check" ref="check" @click="checkClick(val)"></van-checkbox>
            </van-col>
            <van-col span="4" class="img"  @click="val.check=!val.check;checkClick(val)">
              <img :src="apiConfig.imgUrl + val.img" alt="" class="leftImg"/>
            </van-col>
            <van-col span="10" :offset="1" @click="val.check=!val.check;checkClick(val)">
              <div class="title">{{ val.title }}</div>
            </van-col>
            <van-col span="9" class="nums">
              <van-stepper
                min="0"
                v-model.number="val.nums"
                :default-value="0"
                :step="val.step"
                theme="round"
                button-size="22"
                disable-input
                async-change
                @change="onChange($event, val)"
              />
              <span>{{ val.danwei }}</span>
            </van-col>
          </van-row>
        </div>
      </div>
      <div v-else>
        <van-empty image="error" description="暂无数据" />
      </div>
    </div>
  </div>
</template>

<script>
import {getFood,getOptionsClass} from "@/apis/journal";
import apiConfig from "../../../config/api.config";
export default {
  data() {
    return {
      apiConfig,
      item: "",
      list: [],
      Optionslist: [],
      value: "0",
      form: {},
      id: "",
      cid:0
    };
  },
  methods: {
    check($event,id){
      let res =document.querySelectorAll('.check')
      console.log(res)
      res.forEach(it =>{
        it.style.color="#2c3e50"
      })
      $event.target.parentNode.style.color="orange"

      this.cid = id;
      this.food()
    },
    getOptions(){
      getOptionsClass({pid:2}).then(res=>{
        this.Optionslist = res.data.list;
      }).catch(err=>{
          if(err.msg){
            this.$toast(err.msg);
          }else{
            this.$toast("网络错误"); 
          }
      })
    },

    onClickLeft() {
      this.$router.go(-1); //返回上一层
    },
    checkClick(val) {
      console.log(val)
      if (this.item === "breakfast") {
        let bool = this.form.zaocan_list.filter(tim => tim.id === val.id);
        if (val.check) {
          if (bool.length === 0) {
            this.form.zaocan_list.push(val)
          }
        } else {
          this.form.zaocan_list.forEach((el, index) => {
            if (el.id === bool[0].id) {
              this.form.zaocan_list.splice(index, 1);
              console.log('111', this.form.zaocan_list, index);
            }
          })
        }

      } else if (this.item === "lunch") {
        let bool = this.form.wucan_list.filter(tim => tim.id === val.id);
        if (val.check) {
          if (bool.length === 0) {
            this.form.wucan_list.push(val)
          }
        } else {
          this.form.wucan_list.forEach((el, index) => {
            if (el.id === bool[0].id) {
              this.form.wucan_list.splice(index, 1);
              console.log('111', this.form.wucan_list, index);
            }
          })
        }

      } else if (this.item === "dinner") {
        let bool = this.form.wancan_list.filter(tim => tim.id === val.id);
        if (val.check) {
          if (bool.length === 0) {
            this.form.wancan_list.push(val)
          }
        } else {
          this.form.wancan_list.forEach((el, index) => {
            if (el.id === bool[0].id) {
              this.form.wancan_list.splice(index, 1);
              console.log('111', this.form.wancan_list, index);
            }
          })
        }

      } else if (Number(this.item) !== NaN) {
        let bool = this.form.jiacan_list[this.item].list.filter(tim => tim.id === val.id);
        if (val.check) {
          if (bool.length === 0) {
            this.form.jiacan_list[this.item].list.push(val)
          }
        } else {
          this.form.jiacan_list[this.item].list.forEach((el, index) => {
            if (el.id === bool[0].id) {
              this.form.jiacan_list[this.item].list.splice(index, 1);
              console.log('111', this.form.jiacan_list[this.item].list, index);
            }
          })
        }
      }


      if (this.id) {
        this.form.id = this.id;
      }
      localStorage.setItem("form", JSON.stringify(this.form));
      let expire = new Date(
        new Date().setDate(new Date().getDate() + 1)
      ).setHours(0, 0, 0, 0);
      this.localStorageSet("food", this.form, expire);
    },
    food() {
      getFood({cid:this.cid})
        .then(res => {
          res.data.forEach(element => {
            element.check = false
            if (element.nums == "2" || element.nums == "1") {
              element.step = 1;
            } else if (element.nums == "100") {
              element.step = 100;
            }
          });
          this.list = res.data;
          let arr = localStorage.getItem("form");
          if (arr !== null) {
            this.form = JSON.parse(arr);
            console.log(this.item)
            this.list.forEach(item => {
              if (this.item === "breakfast") {
                this.form.zaocan_list.forEach(el => {
                  if (el.id == item.id) {
                    item.nums = el.nums;
                    item.check = true;
                  }
                });
              } else if (this.item === "lunch") {
                this.form.wucan_list.forEach(el => {
                  if (el.id == item.id) {
                    item.nums = el.nums;
                    item.check = true;
                  }
                });
              } else if (this.item === "dinner") {
                this.form.wancan_list.forEach(el => {
                  if (el.id == item.id) {
                    item.nums = el.nums;
                    item.check = true;
                  }
                });
              } else if (Number(this.item) !== NaN) {
                this.form.jiacan_list[this.item].list.forEach(el => {
                  console.log(el);
                  if (el.id == item.id) {
                    item.nums = el.nums;
                    item.check = true;
                  }
                });
              }
            });
            console.log("列表", this.list);
          }
        })
        .catch(err => {
          if(err.msg){
            this.$toast(err.msg);
          }
        });
    },

    onChange(value, el) {
      if (this.item === "breakfast") {
        let bool = this.form.zaocan_list.filter(tim => tim.id === el.id);
        console.log(1, bool);
        if (bool.length) {
          if (value > 0) {
            bool[0].nums = value;
            if (!bool[0].check) {
              console.log('?????')
              bool[0].check = true;
            }
          } else {
            bool[0].nums = value;
            if (!bool[0].check) {
              bool[0].check = true;
            }
            this.form.zaocan_list.forEach((el, index) => {
              if (el.id === bool[0].id) {
                el.check = false;
                this.form.zaocan_list.splice(index, 1);
                console.log('111', this.form.zaocan_list, index);
              }
            })
            console.log(bool[0].id);
          }
        } else {
          console.log('0000', el);
          if (el.nums !== 0) {
            el.check = true;
            this.form.zaocan_list.push(el);
          }
        }
      } else if (this.item === "lunch") {
        let bool = this.form.wucan_list.filter(tim => tim.id === el.id);
        console.log(2, bool);
        if (bool.length) {
          if (value > 0) {
            bool[0].nums = value;
            if (!bool[0].check) {
              bool[0].check = true;
            }
          } else {
            bool[0].nums = value;
            if (!bool[0].check) {
              bool[0].check = true;
            }
            this.form.wucan_list.forEach((el, index) => {
              if (el.id === bool[0].id) {
                el.check = false
                this.form.wucan_list.splice(index, 1)
                console.log('111', el, index)
              }
            })
          }
        } else {
          if (el.nums !== 0) {
            el.check = true;
            this.form.wucan_list.push(el);
          }
        }
      } else if (this.item === "dinner") {
        let bool = this.form.wancan_list.filter(tim => tim.id === el.id);
        console.log(3, bool);
        if (bool.length) {
          if (value > 0) {
            bool[0].nums = value;
            if (!bool[0].check) {
              bool[0].check = true;
            }
          } else {
            if (!bool[0].check) {
              bool[0].check = true;
            }
            bool[0].nums = value;
            this.form.wancan_list.forEach((el, index) => {
              if (el.id === bool[0].id) {
                el.check = false
                this.form.wancan_list.splice(index, 1)
                console.log('111', el, index)
              }
            })
          }
        } else {
          if (el.nums !== 0) {
            el.check = true
            this.form.wancan_list.push(el);
          }
        }
      } else if (Number(this.item) != NaN) {
        let bool = this.form.jiacan_list[Number(this.item)].list.filter(
          tim => tim.id === el.id
        );
        console.log(4, bool);
        if (bool.length) {
          if (value > 0) {
            if (!bool[0].check) {
              bool[0].check = true;
            }
            bool[0].nums = value;
          } else {
            bool[0].nums = value;
            if (!bool[0].check) {
              bool[0].check = true;
            }
            this.form.jiacan_list[Number(this.item)].forEach((el, index) => {
              if (el.id === bool[0].id) {
                el.check = false;
                this.form.jiacan_list[Number(this.item)].splice(index, 1)
                console.log('111', el, index)
              }
            })
          }
        } else {
          if (el.nums !== 0) {
            el.check = true;
            this.form.jiacan_list[Number(this.item)].list.push(el);
          }
        }
      }

      if (this.id) {
        this.form.id = this.id;
      }
      localStorage.setItem("form", JSON.stringify(this.form));
      let expire = new Date(
        new Date().setDate(new Date().getDate() + 1)
      ).setHours(0, 0, 0, 0);
      this.localStorageSet("food", this.form, expire);
    }
  },
  mounted() {
    this.food();
    this.getOptions()
    let detail = localStorage.getItem("food");
    console.log(detail,'detail')
    if (detail) {
      this.id = JSON.parse(detail).id;
    }
  },
  created() {
    this.item = this.$route.params.item;
  }
};
</script>

<style lang="less">
#TreatmentPlan {
  text-align: left;
  .van-nav-bar{
    .van-icon,.van-nav-bar__text {
    color: #404040;
    }
  }
  .header {
    margin: 10px;
    background-color: #fff;
    padding: 10px;
    border-radius: 10px;
    //display: flex;
    .check{
      display: inline-block;
      width: 33%;
      //overflow: hidden;
      //text-overflow:ellipsis; //溢出用省略号显示
      //white-space:nowrap; //溢出不换行
      //margin: 0 1px;
     

      img {
        margin-right: 5px;
        width: 35px;
        height: 35px;
        vertical-align: middle;
      }
      span{
        display: inline-block;
        width: fit-content;
        height: 40px;
      }
    }

  }
  .main {
    margin: 10px;
    background-color: #fff;
    padding: 10px;
    border-radius: 10px;
    .van-row {
      border-bottom: 1px solid rgba(210, 210, 210, 0.5);

      .van-col {
        &:nth-child(2) {
          width: 58px;
          height: 55px;
        }
      }

      &:last-child {
        border: none;
      }
    }

    .leftImg {
      width: 50px;
      height: 50px;
    }

    .title {
      font-size: 15px;
      color: rgba(21, 21, 21, 1);
      font-weight: 500;
    }
    .nums {
      display: flex;
      .van-stepper__input {
        width: 40px;
        text-align: left;
        margin: 0 6px;
      }
      span {
        position: relative;
        right: 40px;
        height: 20px;
      }
    }
    .info {
      width: 130px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      span {
        font-size: 13px;
        color: rgba(21, 21, 21, 1);
        opacity: 0.8;

        &:first-child {
          margin-right: 5px;
        }

        
      }
    }

    .van-stepper--round .van-stepper__minus {
      color: #4e8af4;
      border-color: #4e8af4;
    }

    .van-stepper--round .van-stepper__plus {
      background-color: #4e8af4;
    }
  }
}
</style>
